<template>
  <a-drawer
    title="详情"
    :closable="true"
    width="720"
    placement="right"
    :visible="visible"
    @close="hideModal">
    <a-spin :spinning="spinning">
      <a-form-model
        :model="formData"
        :rules="rules"
        ref="myForm"
        :style="{ width: '100%' }"
        layout="vertical"
        v-bind="{}"
        :colon="true"
        labelAlign="right"
      >
        <a-row style="height: 100%">
          <a-col :span="24">
            <a-row :gutter="5">
              <a-col :span="8">
                <a-form-model-item label="日志类型" prop="type" v-bind="{}">
                  <lz-text color="" :value="formData.type"></lz-text>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="操作时间" prop="createdTime" v-bind="{}">
                  <lz-text color="" :value="formData.createdTime"></lz-text>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="操作描述" prop="description" v-bind="{}">
                  <lz-text color="" :value="formData.description"></lz-text>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="24">
            <a-row :gutter="5">
              <a-col :span="8">
                <a-form-model-item label="操作IP" prop="ip" v-bind="{}">
                  <lz-text color="" :value="formData.ip"></lz-text>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="操作地点" prop="location" v-bind="{}">
                  <lz-text color="" :value="formData.location"></lz-text>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="浏览器" prop="browser" v-bind="{}">
                  <lz-text color="" :value="formData.browser"></lz-text>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="24">
            <a-row :gutter="5">
              <a-col :span="8">
                <a-form-model-item label="操作人ID" prop="userId" v-bind="{}">
                  <lz-text color="" :value="formData.userId"></lz-text>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="操作人名称" prop="userName" v-bind="{}">
                  <lz-text color="" :value="formData.userName"></lz-text>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="操作系统" prop="os" v-bind="{}">
                  <lz-text color="" :value="formData.os"></lz-text>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="24">
            <a-row :gutter="5">
              <a-col :span="8">
                <a-form-model-item label="访问方法" prop="actionMethod" v-bind="{}">
                  <lz-text color="" :value="formData.actionMethod"></lz-text>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="请求方式" prop="requestMethod" v-bind="{}">
                  <lz-text color="" :value="formData.requestMethod"></lz-text>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="操作结果" prop="resultCode" v-bind="{}">
                  <lz-text color="" :value="formData.resultCode"></lz-text>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="24">
            <a-row :gutter="5">
              <a-col :span="12">
                <a-form-model-item label="请求地址" prop="actionUrl" v-bind="{}">
                  <lz-text color="" :value="formData.actionUrl"></lz-text>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="访问类名" prop="classPath" v-bind="{}">
                  <lz-text color="" :value="formData.classPath"></lz-text>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="请求参数" prop="params" v-bind="{}">
              <lz-text color="" :value="formData.params"></lz-text>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="响应结果" prop="result" v-bind="{}">
              <lz-text color="" :value="formData.result"></lz-text>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="异常描述" prop="exMsg" v-bind="{}">
              <lz-text color="" :value="formData.exMsg"></lz-text>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="异常信息" prop="exDetail" v-bind="{}">
              <lz-text color="" :value="formData.exDetail"></lz-text>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </a-drawer>
</template>

<script>
import { get } from '@/api/sys/log'
export default {
  components: {},
  props: [],
  data () {
    return {
      spinning: true,
      confirmLoading: false,
      visible: false,
      defaultFormData: {
        type: '',
        createdTime: '',
        description: '',
        ip: '',
        location: '',
        browser: '',
        userId: '',
        userName: '',
        os: '',
        actionUrl: '',
        requestMethod: '',
        actionMethod: '',
        classPath: '',
        resultCode: '',
        params: '',
        result: '',
        exMsg: '',
        exDetail: ''
      },
      formData: {},
      rules: {}
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    showModal (id) {
      this.formData = Object.assign({}, this.defaultFormData)
      this.spinning = true
      this.visible = true

      get({ id: id }).then(res => {
        if (res.code === 1) {
          this.formData = Object.assign({}, res.data)
          if (this.formData.type === 1) {
            this.formData.type = '操作日志'
          } else if (this.formData.type === 2) {
            this.formData.type = '异常日志'
          }

          if (this.formData.resultCode === 1) {
            this.formData.resultCode = '操作成功'
          } else {
            this.formData.resultCode = '操作失败'
          }
          this.spinning = false
        }
      })
    },
    hideModal () {
      this.confirmLoading = false
      this.visible = false
    },
    handleOk () {
      this.confirmLoading = true
      this.$refs['myForm'].validate(valid => {
        if (!valid) {
          this.confirmLoading = false
          console.log('error')
        } else {
          // TODO 提交表单
          console.log(this.formData)
          this.confirmLoading = false
          this.hideModal()
        }
      })
    },
    onReset () {
      this.$refs['myForm'].resetFields()
      this.hideModal()
    }
  }
}
</script>
<style scoped lang="less">
/*复选框样式*/
.ant-checkbox-wrapper + .ant-checkbox-wrapper {
  margin-left: 0px;
}
</style>
